<template>
	<view class="shop-bgcolor flex-column">
		<!-- 自定义弹窗 -->
		<view class="custom-popup" :style="{ display: show ? 'flex' : 'none' }">
			<view class="custom-popup-mask" @click="onClose"></view>
			<view class="custom-popup-content">
				<view class="custom-popup-field">
					<view class="custom-popup-label color8">取货地址</view>
					<view class="custom-popup-input" @click="toSelectAddress">
						<text>{{ address || '请选择地址' }}</text>
						<text class="custom-popup-link">选择</text>
					</view>
				</view>
				<button class="_btn" :disabled="isDisabled" @click="toPay">去支付</button>
			</view>
		</view>

		<view class="wrapper">
			<view class="flex-s-c wrapper bg-color boder-r-10 shadow1">
				<view>
					<image class="shop-logo" style="width: 100px; height: 100px;" :src="currentDetail?.image_text">
					</image>
				</view>
				<view class="flex p-l-20">
					<view class="flex-b-c p-b-10">
						<view><text class="t-18 t-bold">{{ currentDetail.name }}</text></view>
						<view :class="`${currentDetail.status == 1 ? 'shop-status' : 'shop-status2'} t-12 color5`">
							{{ currentDetail.status == 1 ? '营业中' : '休息中' }}
						</view>
					</view>
					<view class="t-14 color4">
						<text>{{ currentDetail.description }}</text>
					</view>
					<view class="flex-s-c t-12 delivery-cost">
						<view><text>配送费￥{{ currentDetail.fee }}</text></view>
						<view class="p-l-12"><text>起送￥{{ currentDetail.start }}</text></view>
					</view>
				</view>
			</view>
		</view>

		<view class="sticky-container">
			<view class="shop-title bg-color">
				<text class="color2 t-18 t-bold">全部商品</text>
			</view>
			<view class="flex-s-s">
				<!-- 自定义侧边栏 -->
				<view class="custom-sidebar">
					<view v-for="(value, key) in classifyTag" :key="key" class="custom-sidebar-item"
						:class="{ active: currentActiveKey === key }" @click="onChangeSidebar(key)">
						{{ value.value }}
					</view>
				</view>
				<scroll-view :style="{ height: scrollViewHeight }" :scroll-top="0" :scroll-y="true" class="scroll-Y"
					@scrolltolower="lower" :show-scrollbar="false">
					<view class="flex bg-color products">
						<view class="p-b-14 t-16 t-bold">{{ classifyTitle }}</view>
						<view>
							<view v-for="(item, index) in product" :key="index" class="flex-s-c products-item">
								<view>
									<image class="goods-img" style="width: 176rpx; height: 176rpx;"
										:src="item.image_text"></image>
								</view>
								<view class="flex p-l-15">
									<view class="t-16 t-bold product-name">
										{{ item.name }}
									</view>
									<view class="flex-b-c">
										<view class="t-bold">
											<text class="t-12">￥</text>
											<text class="t-16 ">{{ item.price }}</text>
										</view>
										<view class="custom-stepper">
											<button class="custom-stepper-btn" :disabled="item.cartnum <= 0"
												@click="decrement(index)">-</button>
											<view class="custom-stepper-value">{{ item.cartnum }}</view>
											<button class="custom-stepper-btn" @click="increment(index)">+</button>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 自定义提交栏 -->
		<view class="custom-submit-bar">
			<view class="flex-s-c">
				<view>

				</view>
				<view class="p-l-10">
					<view class="t-bold">商品总价格 ￥{{ cartprice }}</view>
				</view>
			</view>
			<button class="custom-settle-btn" @click="onSubmit">立即结算</button>
		</view>
	</view>
</template>

<script setup>
	// import {
	// 	onLoad,
	// 	onReachBottom,
	// 	onShow,
	// 	onUnload,
	// 	ref,
	// 	reactive
	// } from 'vue';

	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
		onShow
	} from '@dcloudio/uni-app';

	// 定义一个响应式变量来存储滚动视图高度
	const scrollViewHeight = ref('calc(100vh - 200rpx)');

	// 模拟测试数据
	const mockShopDetail = {
		id: 1,
		name: "宿舍超市",
		image_text: "/static/mock-shop-logo.png",
		status: 1,
		description: "可送达宿舍",
		fee: 2,
		start: 15
	};

	const mockClassifyTag = [{
			id: 1,
			value: "零食"
		},
		{
			id: 2,
			value: "酒水饮料"
		},
		{
			id: 3,
			value: "方便速食"
		},
		{
			id: 4,
			value: "日用品"
		}
	];

	const mockProductList = [{
			cid: 1,
			data: [{
					id: 1,
					name: "好吃点饼干",
					price: 10,
					image_text: "/static/mock-goods1.png",
					cartnum: 2,
					showminus: true
				},
				{
					id: 2,
					name: "乐事薯片（香酥烤鱼味）",
					price: 8,
					image_text: "/static/mock-goods2.png",
					cartnum: 0,
					showminus: false
				},
				{
					id: 3,
					name: "魔芋爽",
					price: 2,
					image_text: "/static/mock-goods3.png",
					cartnum: 0,
					showminus: false
				},
				{
					id: 4,
					name: "鸭脖",
					price: 5,
					image_text: "/static/mock-goods4.png",
					cartnum: 0,
					showminus: false
				}
			],
			price: 20,
			num: 2
		},
		{
			cid: 2,
			data: [{
					id: 5,
					name: "可乐",
					price: 3,
					image_text: "/static/mock-drink1.png",
					cartnum: 0,
					showminus: false
				},
				{
					id: 6,
					name: "啤酒",
					price: 5,
					image_text: "/static/mock-drink2.png",
					cartnum: 0,
					showminus: false
				}
			],
			price: 0,
			num: 0
		},
		{
			cid: 3,
			data: [{
					id: 7,
					name: "方便面",
					price: 4,
					image_text: "/static/mock-food1.png",
					cartnum: 0,
					showminus: false
				},
				{
					id: 8,
					name: "自热米饭",
					price: 12,
					image_text: "/static/mock-food2.png",
					cartnum: 0,
					showminus: false
				}
			],
			price: 0,
			num: 0
		},
		{
			cid: 4,
			data: [{
					id: 9,
					name: "卫生纸",
					price: 10,
					image_text: "/static/mock-daily1.png",
					cartnum: 0,
					showminus: false
				},
				{
					id: 10,
					name: "牙膏",
					price: 8,
					image_text: "/static/mock-daily2.png",
					cartnum: 0,
					showminus: false
				}
			],
			price: 0,
			num: 0
		}
	];

	// 响应式数据
	const shopId = ref(null);
	const currentDetail = ref(mockShopDetail);
	const classifyTag = ref(mockClassifyTag);
	const cartnum = ref(2);
	const isDisabled = ref(false);
	const product = ref([]);
	const currentActiveKey = ref(0);
	const classifyTitle = ref('');
	const pageNum = ref(1);
	const total = ref(1);
	const cartprice = ref(20);
	const show = ref(false);
	const address = ref('');
	const addressId = ref(0);

	// 地址选择回调
	const getAddress = (res) => {
		if (res.address) {
			uni.$off('selectAddress');
			address.value = res.address;
			addressId.value = res.id;
		}
	};

	// 数量增加
	const increment = (index) => {
		const item = product.value[index];
		item.cartnum++;
		item.showminus = true;
		// 重新计算总价和数量
		cartprice.value = product.value.reduce((sum, item) => sum + item.price * item.cartnum, 0);
		cartnum.value = product.value.reduce((sum, item) => sum + item.cartnum, 0);
	};

	// 数量减少
	const decrement = (index) => {
		const item = product.value[index];
		if (item.cartnum > 0) {
			item.cartnum--;
			if (item.cartnum === 0) {
				item.showminus = false;
			}
			// 重新计算总价和数量
			cartprice.value = product.value.reduce((sum, item) => sum + item.price * item.cartnum, 0);
			cartnum.value = product.value.reduce((sum, item) => sum + item.cartnum, 0);
		}
	};

	// 去支付逻辑
	const toPay = async () => {
		if (!address.value) {
			uni.showToast({
				title: '请选择地址',
				duration: 2000,
				icon: 'none'
			});
			return;
		}
		isDisabled.value = true;

		// 模拟支付成功
		setTimeout(() => {
			uni.showToast({
				title: '结算成功',
				duration: 1000
			});
			product.value = [];
			pageNum.value = 1;
			total.value = 1;
			getClassify();
			isDisabled.value = false;
			show.value = !show.value;
		}, 1000);
	};

	// 立即结算逻辑
	const onSubmit = () => {
		if (Number(currentDetail.value.start) > Number(cartprice.value)) {
			uni.showToast({
				title: '未满起送费',
				duration: 2000,
				icon: 'none'
			});
			return;
		}
		if (cartnum.value === 0) {
			uni.showToast({
				title: '请选择购买的商品',
				duration: 2000
			});
		} else {
			show.value = !show.value;
		}
	};

	// 切换侧边栏逻辑
	const onChangeSidebar = (key) => {
		currentActiveKey.value = key;
		classifyTitle.value = classifyTag.value[key].value;
		const cid = classifyTag.value[key].id;
		const mockData = mockProductList.find(item => item.cid === cid);
		product.value = mockData.data;
		cartprice.value = mockData.price;
		cartnum.value = mockData.num;
	};

	// 获取商店详情（模拟）
	const getCurrentShopDetail = () => {
		currentDetail.value = mockShopDetail;
	};

	// 获取商品分类（模拟）
	const getClassify = () => {
		classifyTitle.value = classifyTag.value[currentActiveKey.value].value;
		const cid = classifyTag.value[currentActiveKey.value].id;
		const mockData = mockProductList.find(item => item.cid === cid);
		product.value = mockData.data;
		cartprice.value = mockData.price;
		cartnum.value = mockData.num;
	};

	// 触底加载（模拟）
	onReachBottom(() => {
		if (pageNum.value >= total.value) {
			uni.showToast({
				title: '没有更多数据',
				duration: 2000
			});
		} else {
			pageNum.value++;
			getClassify();
		}
	});

	// 关闭弹窗
	const onClose = () => {
		show.value = !show.value;
	};

	// 跳转选择地址
	const toSelectAddress = () => {
		uni.navigateTo({
			url: '/package/pages/address/address'
		});
	};

	// 页面加载
	onLoad((options) => {
		shopId.value = options.shopId;
		getCurrentShopDetail();
		getClassify();
	});

	// 页面显示
	onShow(() => {
		uni.$on('selectAddress', getAddress);
	});

	// 页面卸载
	onUnload(() => {
		uni.$off('selectAddress');
	});
</script>

<style scoped>
	/* 自定义弹窗 */
	.custom-popup {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		z-index: 999999;
	}

	.custom-popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.custom-popup-content {
		width: 100%;
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		padding: 30rpx;
	}

	.custom-popup-field {
		display: flex;
		flex-direction: column;
		margin-bottom: 30rpx;
	}

	.custom-popup-label {
		font-size: 14px;
		color: #888;
		margin-bottom: 10rpx;
	}

	.custom-popup-input {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 1px solid #ccc;
		border-radius: 8rpx;
		padding: 10rpx;
	}

	.custom-popup-link {
		color: #3c91ff;
	}

	/* 自定义侧边栏 */
	.custom-sidebar {
		width: 100px;
		background-color: #f5f5f5;
	}

	.custom-sidebar-item {
		padding: 15px;
		text-align: center;
		border-bottom: 1px solid #f5f5f5;
	}

	.custom-sidebar-item.active {
		background-color: #3c91ff;
		color: #fff;
	}

	/* 自定义步进器 */
	.custom-stepper {
		display: flex;
		align-items: center;
	}

	.custom-stepper-btn {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		border: 1px solid #ccc;
		border-radius: 5px;
		background-color: #fff;
		margin: 0 5px;
	}

	.custom-stepper-value {
		font-size: 16px;
	}

	/* 自定义提交栏 */
	.custom-submit-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 15px;
		border-top: 1px solid #f5f5f5;
		background-color: #fff;
	}

	.custom-settle-btn {
		padding: 10px 20px;
		background-color: #3c91ff;
		color: #fff;
		border-radius: 5px;
	}

	/* 原有页面样式 */
	.shop-bgcolor {
		height: 100vh;
		background: linear-gradient(360deg, #FFFFFF 31.23%, #E3EEFF 59.93%);
	}

	.wrapper {
		padding: 15rpx;
	}

	.shop-title {
		padding: 30rpx 60rpx;
		border-bottom: 1px solid #dddddd;
	}

	.products {
		padding: 30rpx 20rpx;
	}

	.products-item {
		margin-bottom: 40rpx;
	}

	.delivery-cost {
		padding-top: 50rpx;
	}

	.shop-status {
		padding: 10rpx 25rpx;
		background-color: #f89812;
		border-radius: 10rpx;
	}

	.shop-status2 {
		padding: 10rpx 25rpx;
		background-color: #dddddd;
		border-radius: 10rpx;
	}

	.product-name {
		padding-bottom: 70rpx;
	}

	.sticky-container {
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.bg-color {
		background-color: #fff;
	}

	.flex {
		display: flex;
	}

	.flex-s-c {
		display: flex;
		align-items: center;
	}

	.flex-b-c {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex-s-s {
		display: flex;
		justify-content: space-between;
	}

	.p-l-10 {
		padding-left: 10rpx;
	}

	.p-l-12 {
		padding-left: 12rpx;
	}

	.p-l-20 {
		padding-left: 20rpx;
	}

	.p-b-10 {
		padding-bottom: 10rpx;
	}

	.p-b-14 {
		padding-bottom: 14rpx;
	}

	.t-12 {
		font-size: 12px;
	}

	.t-14 {
		font-size: 14px;
	}

	.t-16 {
		font-size: 16px;
	}

	.t-18 {
		font-size: 18px;
	}

	.t-bold {
		font-weight: bold;
	}

	.color2 {
		color: #222;
	}

	.color4 {
		color: #444;
	}

	.color5 {
		color: #555;
	}

	.color8 {
		color: #888;
	}

	.boder-r-10 {
		border-radius: 10rpx;
	}

	.shadow1 {
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	}

	._btn {
		background-color: #3c91ff;
		color: white;
		border-radius: 20rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 26rpx;
		width: 48%;
	}

	._btndis {
		background-color: #ddd;
		color: white;
		border-radius: 20rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 26rpx;
		width: 48%;
	}
</style>